<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>用户登录</title>
    <%@include file="/comm/head.jsp"%>
    <style>
        #code{
            width:80px;
            height:80px;
            background-color:#30adde;
            padding:5px;
            line-height:65px;
            text-align:center;
            font-size:18px;
            color:#f7fbfe;
            font-weight:bold;
            margin-top: 0px;
        }
        .yan{
            position: absolute;/*绝对定位*/
            width: 150px;
            height: 30px;
            text-align: center;/*(让div中的内容居中)*/
            top: 55%;
            left: 50%;
            margin-top: -10px;
            margin-left: -150px;
        }
        body{
            background-size: 100% 100%;
            /*background: url("/attach/蓝天大海.png");*/
        }
    </style>
</head>
<body background="/attach/蓝天大海.png">
<div id="root">
    <card style="width: 40%;margin: 80px auto">
        <p slot="title">
            用户登录<%-- <shiro:authenticated>已登录</shiro:authenticated>--%>
        </p>
        <%-- <i-form style="padding:50px;text-align:center" action="${pageContext.request.contextPath}/login"  method="post">--%>
        <i-form style="padding:50px;text-align:center"  :model="form" method="post" id=""  :rules="ruleInline">
            <c:if test="${not empty loginErr}">
                <alert type="error" show-icon>${loginErr}</alert>
            </c:if>
            <form-Item>
                <i-input prefix="ios-contact" name="userCode"  placeholder="请输入用户名"  size="large"/>
            </form-Item>
            <form-Item>
                <i-input prefix="ios-lock" name="password" type="password" placeholder="请输入密码"   size="large"/>
            </form-Item>
             <input type="text" name="yanzheng" class="yan" placeholder="请输入验证码" v-model="form.yanzheng"   id="newCode"/>
             <div id="code"></div>
            <form-item>
                 <i-button <%--html-type="submit"--%>   id="validate" type="primary"   style="width:40%; margin-top: 25px">登 录</i-button><%--type="submit"默认会提交数据到LoginController里面的post请求方式--%>
             <%--<i-button html-type="submit"  type="primary"   style="width:40%;">登 录</i-button>--%>
            </form-item>
        </i-form>
    </card>
    <%--<div class="note" :style ="note"></div>--%>
</div>
<script>

    window.onload=function(){
         //保存全局，与新输入的验证码进行校验
         var code;
         //获取对应的标签
         var codeDiv=document.getElementById('code');
         var newCodeInput=document.getElementById('newCode');
         var validate=document.getElementById('validate');
         var yanzhengshi=document.getElementById('yanzhengshi')
         //加载页面获取对应的验证码
         creatCode();
         //1、获取min到max之间的整数(1-100)
         function random(max,min){
             return Math.floor(Math.random()*(max-min)+min);
         }
         function creatCode(){
             //设置默认的空的字符串
             code='';
             var codeLength=4;
             var randomCode=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G',
                 'H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
             for(var i=0;i<codeLength;i++){
                 //设置随机范围0-36
                 var index=random(0,36);
                 code+=randomCode[index];
             }
             codeDiv.innerHTML=code;
         }
         //验证按钮校验
         validate.onclick = function(){
             //获取用户新输入的验证码
             var newCode=newCodeInput.value.toUpperCase();
             if(newCode==code){
                 //验证成功就把button按钮改为submit提交按钮
                 document.getElementById('validate').setAttribute('type','submit');
             }else{

                 //验证失败
                 // alert("验证码不正确，请重新输入!");
                  iview.Modal.confirm({
                      title:"信息提示",
                      content:"验证码不正确，亲，请重新输入!",
                       onOk(){
                           location=location;//页面重新加载一下
                           //输入框置空
                           newCodeInput.value = '';
                           //重新获取验证码
                           creatCode();
                       }
                  });

                 // location=location;//页面重新加载一下
             }
         }
     };
    new Vue({
        el:"#root",
        data:{
        /*    note: {
                backgroundImage: "url(" + require("../../attach/apic25516.jpg") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "25px auto",
                marginTop: "5px",
            },*/

            form:{
                user:'',
                password:'',
                yanzheng:'',
            },
            ruleInline: {
                user: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码必须大于等于6', trigger: 'blur' }
                ],


            }
        }
    })
</script>
</body>
</html>
